{% extends "base.html" %}

{% block content %}
<div class="card">
    <h2><i class="fas fa-comments"></i> 医学智能问答系统</h2>
    <p>在这里您可以提出任何医学相关问题，我们的智能助手会为您提供详细的解答。</p>
    
    <div class="chat-container">
        <div class="chat-messages" id="chat-messages">
            <div class="message bot-message">
                您好！我是医学教育虚拟助手。您可以向我询问任何医学相关问题，我会尽力为您解答。
            </div>
        </div>
        <div class="chat-input">
            <input type="text" id="user-input" placeholder="输入您的医学问题...">
            <button id="send-btn"><i class="fas fa-paper-plane"></i> 发送</button>
        </div>
    </div>
</div>

<div class="card" id="answer-details" style="display: none;">
    <h2><i class="fas fa-info-circle"></i> 详细解释</h2>
    <div id="detailed-answer"></div>
    <div id="related-topics" style="margin-top: 1rem;">
        <h3>相关主题</h3>
        <ul class="topic-list" id="related-topics-list"></ul>
    </div>
</div>

<script>
document.getElementById('send-btn').addEventListener('click', sendMessage);
document.getElementById('user-input').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        sendMessage();
    }
});

function sendMessage() {
    const input = document.getElementById('user-input');
    const message = input.value.trim();
    
    if (message) {
        // 添加用户消息到聊天界面
        const chatMessages = document.getElementById('chat-messages');
        const userMessage = document.createElement('div');
        userMessage.className = 'message user-message';
        userMessage.textContent = message;
        chatMessages.appendChild(userMessage);
        
        // 显示"正在输入"指示
        const typingIndicator = document.createElement('div');
        typingIndicator.className = 'message bot-message';
        typingIndicator.textContent = '正在思考...';
        typingIndicator.id = 'typing-indicator';
        chatMessages.appendChild(typingIndicator);
        
        // 滚动到底部
        chatMessages.scrollTop = chatMessages.scrollHeight;
        
        // 发送请求到后端
        fetch('/chat', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `question=${encodeURIComponent(message)}`
        })
        .then(response => response.json())
        .then(data => {
            // 移除"正在输入"指示
            document.getElementById('typing-indicator').remove();
            
            // 添加助手回复
            const botMessage = document.createElement('div');
            botMessage.className = 'message bot-message';
            botMessage.textContent = data.answer;
            chatMessages.appendChild(botMessage);
            
            // 显示详细解释和相关主题
            const detailsDiv = document.getElementById('answer-details');
            const detailedAnswer = document.getElementById('detailed-answer');
            const relatedTopicsList = document.getElementById('related-topics-list');
            
            detailedAnswer.innerHTML = data.explanation || '暂无更多解释';
            relatedTopicsList.innerHTML = '';
            
            if (data.related_topics && data.related_topics.length > 0) {
                data.related_topics.forEach(topic => {
                    const li = document.createElement('li');
                    li.textContent = topic;
                    relatedTopicsList.appendChild(li);
                });
                detailsDiv.style.display = 'block';
            } else {
                detailsDiv.style.display = 'none';
            }
            
            // 滚动到底部
            chatMessages.scrollTop = chatMessages.scrollHeight;
        });
        
        // 清空输入框
        input.value = '';
    }
}
</script>
{% endblock %}